<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义图片聊天页</title>
    <style>
        /* 页面整体样式：黑色背景，白色文字，居中布局 */
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }
        /* 输入区域样式 */
        .input-area {
            margin: 20px 0;
        }
        input {
            width: 300px;
            height: 40px;
            border: 2px solid #fff;
            background-color: #000;
            color: #fff;
            padding: 0 10px;
            font-size: 16px;
        }
        button {
            height: 44px;
            border: 2px solid #fff;
            background-color: #000;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            margin-left: 10px; /* 按钮与输入框留点距离 */
        }
        /* 自定义图片样式（可根据图片调整大小） */
        .custom-image {
            width: 200px; /* 图片宽度，可自行修改 */
            height: auto; /* 高度自适应，避免变形 */
            margin: 20px 0; /* 上下留点间距 */
            border: 2px solid #fff; /* 图片边框（可选） */
        }
        /* 动态文本容器样式 */
        #response {
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div>hi friend</div>
    <div class="input-area">
        <input type="text" id="messageInput" placeholder="输入内容后按send或回车">
        <button id="sendBtn">send</button>
    </div>
    
    <!-- 这里替换成你的图片 -->
    <img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.WR1P6uVuHxAqa942l7ub9QHaHa?rs=1&pid=ImgDetMain&o=7&rm=3" class="custom-image" alt="自定义图片">
    
    <div id="response"></div>

    <script>
        // 获取DOM元素
        const input = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');
        const response = document.getElementById('response');

        // 发送按钮点击事件
        sendBtn.addEventListener('click', sendMessage);

        // 支持回车键发送
        input.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 发送消息的函数
        function sendMessage() {
            const text = input.value.trim(); // 获取输入内容
            if (text) { // 如果输入了内容
                response.textContent = '嘎嘎嘎嘎'; // 显示回应
            } else {
                response.textContent = '请输入内容哦~'; // 提示输入
            }
            input.value = ''; // 清空输入框
        }
    </script>
</body>
</html>